<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14" fill="none">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M0.25 1.75C0.25 0.921573 0.921573 0.25 1.75 0.25C2.57843 0.25 3.25 0.921573 3.25 1.75C3.25 2.57843 2.57843 3.25 1.75 3.25C0.921573 3.25 0.25 2.57843 0.25 1.75ZM4.75 1.75C4.75 1.33579 5.08579 1 5.5 1H19C19.4142 1 19.75 1.33579 19.75 1.75C19.75 2.16421 19.4142 2.5 19 2.5H5.5C5.08579 2.5 4.75 2.16421 4.75 1.75ZM0.25 7C0.25 6.17157 0.921573 5.5 1.75 5.5C2.57843 5.5 3.25 6.17157 3.25 7C3.25 7.82843 2.57843 8.5 1.75 8.5C0.921573 8.5 0.25 7.82843 0.25 7ZM4.75 7C4.75 6.58579 5.08579 6.25 5.5 6.25H19C19.4142 6.25 19.75 6.58579 19.75 7C19.75 7.41421 19.4142 7.75 19 7.75H5.5C5.08579 7.75 4.75 7.41421 4.75 7ZM0.25 12.25C0.25 11.4216 0.921573 10.75 1.75 10.75C2.57843 10.75 3.25 11.4216 3.25 12.25C3.25 13.0784 2.57843 13.75 1.75 13.75C0.921573 13.75 0.25 13.0784 0.25 12.25ZM4.75 12.25C4.75 11.8358 5.08579 11.5 5.5 11.5H19C19.4142 11.5 19.75 11.8358 19.75 12.25C19.75 12.6642 19.4142 13 19 13H5.5C5.08579 13 4.75 12.6642 4.75 12.25Z"
      fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #222222;
    }
  }
</style>
